<template>
    <basic-container>
        <avue-crud :option="option"
                   :data="data"
                   ref="crud"
                   v-model="form"
                   :table-loading="loading"
                   :permission="permissionList"
                   @row-del="rowDel"
                   :page="page"
                   @refresh-change="refreshChange"
                   @search-change="searchChange"
                   @search-reset="searchReset"
                   @current-change="currentChange"
                   @size-change="sizeChange"
                   @on-load="onLoad">
            <template slot-scope="scope" slot="menuLeft">
                <el-button type="primary" size="mini" @click="handleAdd()"
                           v-has="'/mall-cloud-base/navigation/addItem'">新增
                </el-button>
            </template>
            <template slot-scope="{row,type,size}" slot="menu">
                <el-button :type="type" :size="size" icon="el-icon-edit" @click="getEdit(row)"
                           v-has="'/mall-cloud-base/navigation/editItem'">编辑
                </el-button>
                <el-button :type="type" :size="size" icon="el-icon-view" @click="getView(row)">查看
                </el-button>
            </template>
            <template slot-scope="scope" slot="actIcoForm">
                <div class="upload">
                    <el-input style="margin-right: 0.2rem;" readonly @focus="uploadbtn" v-model="form.actIco"/>
                    <el-image v-if="form.actIco" @click="uploadbtn" fit="contain" :src="form.actIco"
                              style="margin-right: 0.2rem;width: 50px; height: 50px;margin: 0 0.2rem;"></el-image>
                    <el-button size="mini" type="primary" @click="uploadbtn">选择图标</el-button>
                    <p class="tsmsg">最多可上传1张照片</p>
                </div>
            </template>
            <template slot-scope="scope" slot="actIco">
                <el-image fit="contain" :src="scope.row.actIco"
                          style="margin-right: 0.2rem;width: 50px; height: 50px;margin: 0 0.2rem;"></el-image>
            </template>
            <!-- <template slot-scope="scope" slot="actIdForm">
               <div>
                 <el-select v-model="form.actId" filterable  placeholder="选择平台活动" size="mini">
                   <el-option v-for="item in actPlatformData" :key="item.id" :label="item.acTitle" :value="item.id">
                     <span style="float: left">{{ item.acTitle }}</span>
                   </el-option>
                 </el-select>
               </div>
             </template> -->
        </avue-crud>
        <selFile ref="selFile" selectType="radio" @callback="selFileCallBack" albumCode="pic_root" dialogTitle="选择图标"
                 selMaxWidth="500px" selMaxHeight="1280px"></selFile>
        <!--        新增导航-->
        <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" @close="closeDrawer" width="90%">
            <avue-form :disabled=isView ref="forms" v-model="form" :option="newOption" @submit="submit">
                <template slot-scope="scope" slot="actIco">
                    <div class="upload">
                        <el-input :disabled=isView style="margin-right: 0.2rem;" readonly @focus="uploadbtn"
                                  v-model="form.actIco"/>
                        <el-image v-if="form.actIco" @click="uploadbtn" fit="contain" :src="form.actIco"
                                  style="margin-right: 0.2rem;width: 50px; height: 50px;margin: 0 0.2rem;"></el-image>
                        <el-button :disabled=isView size="mini" type="primary" @click="uploadbtn">选择图标</el-button>
                        <!--<p class="tsmsg">最多可上传1张照片</p>-->
                    </div>
                </template>
                <template slot-scope="scope" slot="actId">
                    <div class="upload" @click="chooseView">
                        <el-input :disabled=isView style="margin-right: 0.2rem;" readonly
                                  v-model="chooseValue"/>
                        <el-button :disabled=isView size="mini" type="primary">选择活动</el-button>
                    </div>
                </template>
                <template slot-scope="scope" slot="goodsClassId">
                    <div class="upload" @click="chooseView">
                        <el-input :disabled=isView style="margin-right: 0.2rem;" readonly
                                  v-model="chooseValue"/>
                        <el-button :disabled=isView size="mini" type="primary">选择一级分类</el-button>
                    </div>
                </template>
                <template slot-scope="scope" slot="secondGoodsClassId">
                    <div class="upload" @click="chooseView">
                        <el-input :disabled=isView style="margin-right: 0.2rem;" readonly
                                  v-model="chooseValue"/>
                        <el-button :disabled=isView size="mini" type="primary">选择二级分类</el-button>
                    </div>
                </template>
                <template slot-scope="scope" slot="thirdGoodsClassId">
                    <div class="upload" @click="chooseView">
                        <el-input :disabled=isView style="margin-right: 0.2rem;" readonly
                                  v-model="chooseValue"/>
                        <el-button :disabled=isView size="mini" type="primary">选择三级分类</el-button>
                    </div>
                </template>
                <template slot-scope="scope" slot="storeId">
                    <div class="upload" @click="chooseView">
                        <el-input :disabled=isView style="margin-right: 0.2rem;" readonly
                                  v-model="chooseValue"/>
                        <el-button :disabled=isView size="mini" type="primary">选择店铺</el-button>
                    </div>
                </template>
                <template slot-scope="scope" slot="goodsId">
                    <div class="upload" @click="chooseView">
                        <el-input :disabled=isView style="margin-right: 0.2rem;" readonly
                                  v-model="chooseValue"/>
                        <el-button :disabled=isView size="mini" type="primary">选择商品</el-button>
                    </div>
                </template>
                <template slot-scope="" slot="menuForm">
                    <el-button @click="closeDrawer" v-if="!isView">取消</el-button>
                    <el-button @click="closeDrawer" v-else> 关闭</el-button>
                </template>
            </avue-form>
        </el-dialog>
        <!--活动选择框-->
        <el-drawer :visible.sync="drawerAct" :with-header="false" size="60%">
            <div class="demo-drawer__header">
                <div class="drawerHeader"><strong>选择列表</strong></div>
            </div>
            <div class="demo-drawer__content">
                <avue-crud
                        ref="goodsCrud"
                        :data="sellerGoodsList"
                        :option="sellerActOption"
                        v-model="sellerGoods"
                        :table-loading="sellerGoodsloading"
                        :page="sellerGoodsPage"
                        @refresh-change="refreshSellerGoodsChange"
                        @search-change="searchSellerGoodsChange"
                        @search-reset="searchSellerGoodsReset"
                        @current-change="currentSellerGoodsChange"
                        @size-change="sizeSellerGoodsChange"
                        @on-load="onSellerGoodsLoad"
                >
                    <template slot-scope="scope" slot="menu">
                        <el-button size="mini" type="text" @click="addGoods(scope.row)">添加</el-button>
                    </template>
                </avue-crud>
            </div>
        </el-drawer>
        <!--分类选择框-->
        <el-drawer :visible.sync="drawerClass" :with-header="false" size="60%">
            <div class="demo-drawer__header">
                <div class="drawerHeader"><strong>选择列表</strong></div>
            </div>
            <div class="demo-drawer__content">
                <avue-crud
                        ref="goodsCrud"
                        :data="sellerGoodsList"
                        :option="sellerClassOption"
                        v-model="sellerGoods"
                        :table-loading="sellerGoodsloading"
                        :page="sellerGoodsPage"
                        @refresh-change="refreshSellerGoodsChange"
                        @search-change="searchSellerGoodsChange"
                        @search-reset="searchSellerGoodsReset"
                        @current-change="currentSellerGoodsChange"
                        @size-change="sizeSellerGoodsChange"
                        @on-load="onSellerGoodsLoad"
                >
                    <template slot-scope="scope" slot="menu">
                        <el-button size="mini" type="text" @click="addGoods(scope.row)">添加</el-button>
                    </template>
                </avue-crud>
            </div>
        </el-drawer>
        <!--商品选择框-->
        <el-drawer :visible.sync="drawerGoods" :with-header="false" size="60%">
            <div class="demo-drawer__header">
                <div class="drawerHeader"><strong>选择列表</strong></div>
            </div>
            <div class="demo-drawer__content">
                <avue-crud
                        ref="goodsCrud"
                        :data="sellerGoodsList"
                        :option="sellerGoodsOption"
                        v-model="sellerGoods"
                        :table-loading="sellerGoodsloading"
                        :page="sellerGoodsPage"
                        @refresh-change="refreshSellerGoodsChange"
                        @search-change="searchSellerGoodsChange"
                        @search-reset="searchSellerGoodsReset"
                        @current-change="currentSellerGoodsChange"
                        @size-change="sizeSellerGoodsChange"
                        @on-load="onSellerGoodsLoad"
                >
                    <template slot-scope="scope" slot="menu">
                        <el-button size="mini" type="text" @click="addGoods(scope.row)">添加</el-button>
                    </template>
                </avue-crud>
            </div>
        </el-drawer>
        <!--店铺选择框-->
        <el-drawer :visible.sync="drawerStores" :with-header="false" size="60%">
            <div class="demo-drawer__header">
                <div class="drawerHeader"><strong>选择列表</strong></div>
            </div>
            <div class="demo-drawer__content">
                <avue-crud
                        ref="goodsCrud"
                        :data="sellerGoodsList"
                        :option="sellerStoreOption"
                        v-model="sellerGoods"
                        :table-loading="sellerGoodsloading"
                        :page="sellerGoodsPage"
                        @refresh-change="refreshSellerGoodsChange"
                        @search-change="searchSellerGoodsChange"
                        @search-reset="searchSellerGoodsReset"
                        @current-change="currentSellerGoodsChange"
                        @size-change="sizeSellerGoodsChange"
                        @on-load="onSellerGoodsLoad"
                >
                    <template slot-scope="scope" slot="menu">
                        <el-button size="mini" type="text" @click="addGoods(scope.row)">添加</el-button>
                    </template>
                </avue-crud>
            </div>
        </el-drawer>
    </basic-container>
</template>

<script>
    import {
        getList,
        remove,
        update,
        add,
        getActDictData,
        listManage,
        listDicData,
        StoreListManage
    } from "@/api/base/operations/navigation";
    import {mapGetters} from "vuex";
    import {
        testSort
    } from '@/util/util';
    import selFile from '@/components/file/selFile';

    export default {
        watch: {
            'form.navType'(val) {
                if (val == 0) {
                    //活动
                    this.option.column[3].display = true;//活动
                    this.option.column[4].display = false;//一级分类
                    this.option.column[5].display = false;//二级分类
                    this.option.column[6].display = false;//三级分类
                    this.option.column[7].display = false;//商品
                    this.option.column[8].display = false;//店铺
                    // this.form.showIndex = false;
                    this.newOption.column[1].disabled = false;
                    //编辑框
                    this.newOption.column[3].display = true;//活动
                    this.newOption.column[4].display = false;
                    this.newOption.column[5].display = false;
                    this.newOption.column[6].display = false;//三级分类
                    this.newOption.column[7].display = false;//商品
                    this.newOption.column[8].display = false;//店铺

                    this.form.goodsClassId = "";
                    this.form.secondGoodsClassId = "";
                    this.form.thirdGoodsClassId = "";
                    this.form.goodsId = "";
                    this.form.storeId = "";
                    this.chooseValue = ''
                    this.sellerGoodsList = []
                } else if (val == 1) {
                    //一级分类
                    this.option.column[3].display = false;//活动
                    this.option.column[4].display = true;//一级分类
                    this.option.column[5].display = false;//二级分类
                    this.option.column[6].display = false;//三级分类
                    this.option.column[7].display = false;//商品
                    this.option.column[8].display = false;//店铺
                    this.form.showIndex = false;
                    this.newOption.column[1].disabled = true;
                    //编辑框
                    this.newOption.column[3].display = false;//活动
                    this.newOption.column[4].display = true;
                    this.newOption.column[5].display = false;
                    this.newOption.column[6].display = false;//三级分类
                    this.newOption.column[7].display = false;//商品
                    this.newOption.column[8].display = false;//店铺


                    this.form.actId = "";
                    //this.form.goodsClassId = "";
                    this.form.secondGoodsClassId = "";
                    this.form.thirdGoodsClassId = "";
                    this.form.goodsId = "";
                    this.form.storeId = "";
                    this.chooseValue = ''
                    this.sellerGoodsList = []
                } else if (val == 2) {
                    //二级分类
                    this.option.column[3].display = false;//活动
                    this.option.column[4].display = false;//一级分类
                    this.option.column[5].display = true;//二级分类
                    this.option.column[6].display = false;//三级分类
                    this.option.column[7].display = false;//商品
                    this.option.column[8].display = false;//店铺
                    this.form.showIndex = false;
                    this.newOption.column[1].disabled = true;
                    //编辑框
                    this.newOption.column[3].display = false;//活动
                    this.newOption.column[4].display = false;
                    this.newOption.column[5].display = true;
                    this.newOption.column[6].display = false;//三级分类
                    this.newOption.column[7].display = false;//商品
                    this.newOption.column[8].display = false;//店铺


                    this.form.actId = "";
                    this.form.goodsClassId = "";
                    //this.form.secondGoodsClassId = "";
                    this.form.thirdGoodsClassId = "";
                    this.form.goodsId = "";
                    this.form.storeId = "";
                    this.chooseValue = ''
                    this.sellerGoodsList = []
                } else if (val == 3) {
                    //三级分类
                    this.option.column[3].display = false;//活动
                    this.option.column[4].display = false;//一级分类
                    this.option.column[5].display = false;//二级分类
                    this.option.column[6].display = true;//三级分类
                    this.option.column[7].display = false;//商品
                    this.option.column[8].display = false;//店铺
                    this.form.showIndex = false;
                    this.newOption.column[1].disabled = true;
                    //编辑框
                    this.newOption.column[3].display = false;//活动
                    this.newOption.column[4].display = false;
                    this.newOption.column[5].display = false;
                    this.newOption.column[6].display = true;//三级分类
                    this.newOption.column[7].display = false;//商品
                    this.newOption.column[8].display = false;//店铺


                    this.form.actId = "";
                    this.form.goodsClassId = "";
                    this.form.secondGoodsClassId = "";
                    // this.form.thirdGoodsClassId = "";
                    this.form.goodsId = "";
                    this.form.storeId = "";
                    this.chooseValue = ''
                    this.sellerGoodsList = []
                } else if (val == 4) {
                    //修改商品详情
                    this.option.column[3].display = false;//活动
                    this.option.column[4].display = false;//一级分类
                    this.option.column[5].display = false;//二级分类
                    this.option.column[6].display = false;//三级分类
                    this.option.column[7].display = true;//商品
                    this.option.column[8].display = false;//店铺
                    this.form.showIndex = false;
                    this.newOption.column[1].disabled = true;
                    //编辑框
                    this.newOption.column[3].display = false;//活动
                    this.newOption.column[4].display = false;
                    this.newOption.column[5].display = false;
                    this.newOption.column[6].display = false;//三级分类
                    this.newOption.column[7].display = true;//商品
                    this.newOption.column[8].display = false;//店铺


                    this.form.actId = "";
                    this.form.goodsClassId = "";
                    this.form.secondGoodsClassId = "";
                    this.form.thirdGoodsClassId = "";
                    this.form.storeId = "";
                    this.chooseValue = ''
                    this.sellerGoodsList = []
                } else if (val == 5) {
                    // 店铺
                    this.option.column[3].display = false;//活动
                    this.option.column[4].display = false;//一级分类
                    this.option.column[5].display = false;//二级分类
                    this.option.column[6].display = false;//三级分类
                    this.option.column[7].display = false;//商品
                    this.option.column[8].display = true;//店铺
                    this.form.showIndex = false;
                    this.newOption.column[1].disabled = true;
                    //编辑框
                    this.newOption.column[3].display = false;//活动
                    this.newOption.column[4].display = false;
                    this.newOption.column[5].display = false;
                    this.newOption.column[6].display = false;//三级分类
                    this.newOption.column[7].display = false;//商品
                    this.newOption.column[8].display = true;//店铺

                    this.form.actId = "";
                    this.form.goodsClassId = "";
                    this.form.secondGoodsClassId = "";
                    this.form.thirdGoodsClassId = "";
                    this.form.goodsId = "";
                    this.chooseValue = ''
                    this.sellerGoodsList = []
                }
            },
            isView() {
                if (this.isView) {
                    this.newOption.submitBtn = false
                } else {
                    this.newOption.submitBtn = true
                }
            }
        },
        data() {
            return {
                chooseOption:[],
                currentPage: 1,
                goodsClassIdOne: [],
                goodsClassIdTwo: [],
                goodsClassIdThree: [],
                isView: false,//是否是查看模式，查看时全不不许编辑
                dialogTitle: "新增",
                dialogVisible: false,//弹出框是否可见
                actPlatformData: [],//平台活动字典
                form: {},
                query: {},
                loading: true,
                rolesTree: [],
                rolesKeys: [],
                box: false,
                page: {
                    pageSize: 10,
                    currentPage: 1,
                    total: 0
                },
                sellerGoodsPage: {
                    pageSize: 10,
                    currentPage: 1,
                    total: 0
                },
                option: {
                    slot: true,
                    size: 'mini',
                    addBtn: false,
                    editBtn: false,
                    tip: false,
                    border: true,
                    index: false,
                    viewBtn: false,
                    rowKey: 'id',
                    height: 'auto',
                    // // calcHeight: 380,
                    dialogType: 'drawer',
                    menuWidth: 300,
                    column: [
                        {
                            label: "导航标题",
                            prop: "title",
                            fixed: true,
                            maxlength: 6,
                            rules: [{
                                required: true,
                                message: "请输入导航标题(六个字以内)",
                                trigger: "blur"
                            }]
                        }, {
                            label: "活动首页展示",
                            prop: "showIndex",
                            type: "radio",
                            display: true,
                            disabled: false,
                            width: 100,
                            dicData: [
                                {
                                    label: "否",
                                    value: false
                                },
                                {
                                    label: "是",
                                    value: true
                                }
                            ],
                            rules: [{
                                required: true,
                                message: "请选择是否活动首页展示",
                                trigger: "blur"
                            }]
                        },
                        {
                            label: "导航类型",
                            prop: "navType",
                            type: 'select',
                            valueDefault: 0,
                            width: 100,
                            dicData: [
                                {
                                    label: "活动",
                                    value: 0
                                },
                                {
                                    label: "一级分类",
                                    value: 1
                                }
                                ,
                                {
                                    label: "二级分类",
                                    value: 2
                                }
                                ,
                                {
                                    label: "三级分类",
                                    value: 3
                                },
                                {
                                    label: "商品详情",
                                    value: 4
                                }
                                ,
                                {
                                    label: "店铺",
                                    value: 5
                                }
                            ],
                            rules: [{
                                required: true,
                                message: "请输入导航类型",
                                trigger: "blur"
                            }]
                        },
                        {
                            label: "选择活动",
                            prop: "acTitle",
                            display: true,
                            rules: [{
                                required: true,
                                message: "请选择活动",
                                trigger: "blur"
                            }]
                        },
                        {
                            label: "一级分类",
                            prop: "goodsClassId",
                            type: "select",
                            fixed: true,
                            display: false,
                            dicUrl: 'base/goodsClass/listManage?classLevel=0&&classDisplay=true',
                            props: {
                                label: 'className',
                                value: 'id'
                            },
                            rules: [{
                                required: true,
                                message: "请选择一级分类",
                                trigger: "blur"
                            }]
                        },
                        {
                            label: "二级分类",
                            prop: "secondGoodsClassId",
                            type: "select",
                            fixed: true,
                            display: false,
                            dicUrl: 'base/goodsClass/listManage?classLevel=1&&classDisplay=true',
                            props: {
                                label: 'className',
                                value: 'id'
                            },
                            rules: [{
                                required: true,
                                message: "请选择二级分类",
                                trigger: "blur"
                            }]
                        },

                        {
                            label: "三级分类",
                            prop: "thirdGoodsClassId",
                            type: "select",
                            fixed: true,
                            display: false,
                            dicUrl: 'base/goodsClass/listManage?classLevel=2&&classDisplay=true',
                            props: {
                                label: 'className',
                                value: 'id'
                            },
                            rules: [{
                                required: true,
                                message: "请选择三级分类",
                                trigger: "blur"
                            }]
                        },
                        {
                            label: "商品",
                            prop: "goodsId",
                            type: "select",
                            fixed: true,
                            display: false,
                            filterable: true,
                            dicUrl: 'base/goodsManage/listDicData',
                            props: {
                                label: 'label',
                                value: 'value'
                            },
                            rules: [{
                                required: true,
                                message: "请选择商品",
                                trigger: "blur"
                            }]
                        },
                        {
                            label: "店铺",
                            prop: "storeId",
                            type: "select",
                            fixed: true,
                            display: false,
                            filterable: true,
                            dicUrl: 'base/store/listManage',
                            dicQuery: {
                                storeStatus: 2
                            },
                            props: {
                                label: 'storeName',
                                value: 'id'
                            },
                            rules: [{
                                required: true,
                                message: "请选择店铺",
                                trigger: "blur"
                            }]
                        },
                        {
                            label: "序号",
                            prop: "sequence",
                            width: 70,
                            rules: [{
                                required: true,
                                message: "请输入序号",
                                trigger: "blur"
                            }]
                        },
                        {
                            label: "活动类型",
                            prop: "acType",
                            display: false,
                            hide: true,
                            rules: [{
                                required: true,
                                message: "请输入活动类型",
                                trigger: "blur"
                            }]
                        },
                        {
                            label: "导航图标",
                            prop: "actIco",
                            formslot: true,
                            slot: true,
                            width: 100,
                            rules: [{
                                required: true,
                                message: "请输入导航图标",
                                trigger: "change"
                            }]
                        }, {
                            label: "是否显示",
                            prop: "display",
                            type: "radio",
                            valueDefault: false,
                            width: 100,
                            dicData: [
                                {
                                    label: "否",
                                    value: false
                                },
                                {
                                    label: "是",
                                    value: true
                                }
                            ],
                            rules: [{
                                required: true,
                                message: "请输入是否显示",
                                trigger: "blur"
                            }]
                        }
                    ]
                },
                newOption: {
                    submitBtn: true,
                    emptyBtn: false,
                    border: true,
                    height: 'auto',
                    // calcHeight: 380,
                    column: [
                        {
                            label: "导航标题",
                            prop: "title",
                            fixed: true,
                            width: 350,
                            maxlength: 6,
                            rules: [{
                                required: true,
                                message: "请输入导航标题(六个字以内)",
                                trigger: "blur"
                            }]
                        }, {
                            label: "活动首页展示",
                            prop: "showIndex",
                            type: "radio",
                            display: true,
                            disabled: false,
                            labelWidth: 120,
                            width: 100,
                            dicData: [
                                {
                                    label: "否",
                                    value: false
                                },
                                {
                                    label: "是",
                                    value: true
                                }
                            ],
                            fixed: true,
                            valueDefault: false,
                            rules: [{
                                required: true,
                                message: "请选择活动首页展示",
                                trigger: "blur"
                            }]
                        },
                        {
                            label: "导航类型",
                            prop: "navType",
                            type: 'select',
                            valueDefault: 0,
                            width: 100,
                            dicData: [
                                {
                                    label: "活动",
                                    value: 0
                                },
                                {
                                    label: "一级分类",
                                    value: 1
                                }
                                ,
                                {
                                    label: "二级分类",
                                    value: 2
                                }
                                ,
                                {
                                    label: "三级分类",
                                    value: 3
                                },
                                {
                                    label: "商品详情",
                                    value: 4
                                }
                                ,
                                {
                                    label: "店铺",
                                    value: 5
                                }
                            ],
                            fixed: true,
                            rules: [{
                                required: true,
                                message: "请输入导航类型",
                                trigger: "blur"
                            }]
                        },
                        {
                            label: "选择活动",
                            prop: "actId",
                            type: "select",
                            formslot: true,
                            fixed: true,
                            display: true,
                            rules: [{
                                required: true,
                                message: "请选择活动",
                                trigger: "change"
                            }]
                        },
                        {
                            label: "一级分类",
                            prop: "goodsClassId",
                            type: "select",
                            fixed: true,
                            display: false,
                            dicData: '',
                            formslot: true,
                            rules: [{
                                required: true,
                                message: "请选择一级分类",
                                trigger: "change"
                            }]
                        },
                        {
                            label: "二级分类",
                            prop: "secondGoodsClassId",
                            type: "select",
                            fixed: true,
                            display: false,
                            dicData: '',
                            formslot: true,
                            rules: [{
                                required: true,
                                message: "请选择二级分类",
                                trigger: "change"
                            }]
                        },

                        {
                            label: "三级分类",
                            prop: "thirdGoodsClassId",
                            type: "select",
                            fixed: true,
                            display: false,
                            dicData: '',
                            formslot: true,
                            rules: [{
                                required: true,
                                message: "请选择三级分类",
                                trigger: "change"
                            }]
                        },
                        {
                            label: "商品",
                            prop: "goodsId",
                            type: "select",
                            fixed: true,
                            display: false,
                            remote: true,
                            formslot: true,
                            // dicUrl: 'base/goodsManage/listDicData?goodsName={{key}}',
                            props: {
                                label: 'label',
                                value: 'value'
                            },
                            rules: [{
                                required: true,
                                message: "请选择商品",
                                trigger: "change"
                            }]
                        },
                        {
                            label: "店铺",
                            prop: "storeId",
                            type: "select",
                            fixed: true,
                            display: false,
                            remote: true,
                            formslot: true,
                            rules: [{
                                required: true,
                                message: "请选择店铺",
                                trigger: "change"
                            }]
                        },
                        {
                            label: "序号",
                            prop: "sequence",
                            fixed: true,
                            width: 70,
                            rules: [{
                                required: true,
                                message: "请输入序号",
                                trigger: "blur"
                            }, {
                                validator: testSort,
                                trigger: 'blur'
                            },]
                        },
                        {
                            label: "活动类型",
                            prop: "acType",
                            fixed: true,
                            display: false,
                            hide: true,
                            rules: [{
                                required: true,
                                message: "请输入活动类型",
                                trigger: "blur"
                            }]
                        },
                        {
                            label: "导航图标",
                            prop: "actIco",
                            formslot: true,
                            slot: true,
                            fixed: true,
                            width: 100,
                            rules: [{
                                required: true,
                                message: "请输入导航图标",
                                trigger: "change"
                            }]
                        }, {
                            label: "是否显示",
                            prop: "display",
                            type: "radio",
                            valueDefault: false,
                            width: 100,
                            dicData: [
                                {
                                    label: "否",
                                    value: false
                                },
                                {
                                    label: "是",
                                    value: true
                                }
                            ],
                            fixed: true,
                            rules: [{
                                required: true,
                                message: "请输入是否显示",
                                trigger: "blur"
                            }]
                        }
                    ]
                },
                sellerGoodsOption: {
                    addBtn: false,
                    editBtn: false,
                    delBtn: false,
                    border: true,
                    align: 'center',
                    menuWidth: 200,
                    column: [
                        {
                            label: "商品",
                            prop: "goodsName",
                            display: true,
                            search:true,
                        },
                    ]
                },
                sellerActOption: {
                    addBtn: false,
                    editBtn: false,
                    delBtn: false,
                    border: true,
                    align: 'center',
                    menuWidth: 200,
                    column: [
                        {
                            label: "活动",
                            prop: "acTitle",
                            display: true,
                            search:true,
                        },
                        {
                            label: '区域',
                            prop: 'createUserOrganizationName',
                            display: true
                        }
                    ]
                },
                sellerClassOption: {
                    addBtn: false,
                    editBtn: false,
                    delBtn: false,
                    border: true,
                    align: 'center',
                    menuWidth: 200,
                    column: [
                        {
                            label: "分类",
                            prop: "className",
                            display: true,
                            search:true,
                        }
                    ]
                },
                sellerStoreOption: {
                    addBtn: false,
                    editBtn: false,
                    delBtn: false,
                    border: true,
                    align: 'center',
                    menuWidth: 200,
                    column: [
                        {
                            label: "店铺",
                            prop: "storeName",
                            display: true,
                            search:true,
                        }
                    ]
                },
                data: [],
                sellerGoodsList: [],
                sellerGoods: {},
                sellerGoodsloading: false,
                drawerGoods: false,
                drawerAct:false,
                drawerStores:false,
                drawerClass:false,
                chooseValue: '',
            };
        },
        computed: {
            ...mapGetters(["permission", 'userInfo']),
            permissionList() {
                return {
                    delBtn: this.vaildData(this.permission["/mall-cloud-base/navigation/delete"], false),
                };
            },
        },
        components: {
            selFile
        },
        created() {
            this.getActData();
        },
        methods: {
            // 添加
            addGoods(row) {
                console.log('row', row)
                let nav = this.form.navType
                if (nav == 0) {
                    this.chooseValue = row.acTitle + '--' + row.createUserOrganizationName
                    this.form.createUserOrganizationName = row.createUserOrganizationName
                    this.form.actId = row.id
                    this.form.acTitle = row.acTitle
                    this.drawerAct = false
                } else if (nav == 1) {
                    this.chooseValue = row.className
                    this.form.goodsClassId = row.id
                    this.drawerClass = false
                } else if (nav == 2) {
                    this.chooseValue = row.className
                    this.form.secondGoodsClassId = row.id
                    this.drawerClass = false
                } else if (nav == 3) {
                    this.chooseValue = row.className
                    this.form.thirdGoodsClassId = row.id
                    this.drawerClass = false
                } else if (nav == 4) {
                    this.chooseValue = row.goodsName
                    this.form.goodsId = row.id
                    this.drawerGoods = false
                } else if (nav == 5) {
                    this.chooseValue = row.storeName
                    this.form.storeId = row.id
                    this.drawerStores = false
                }

            },
            chooseView() {
                this.sellerGoodsPage = {
                    pageSize: 10,
                    currentPage: 1,
                    total: 0
                }
                this.sellerGoodsQuery={}
                this.onSellerGoodsLoad(this.sellerGoodsPage)
                this.sellerGoodsloading = true
            },
            refreshSellerGoodsChange() {
                this.onSellerGoodsLoad(1);
            },
            // 搜索
            searchSellerGoodsChange(params) {
                this.sellerGoodsQuery = params;
                this.sellerGoodsPage.currentPage = 1;
                this.onSellerGoodsLoad(this.sellerGoodsPage, params);
            },
            // 清空搜索
            searchSellerGoodsReset() {
                this.sellerGoodsQuery = {};
                this.goodsClassId = ''
                this.onSellerGoodsLoad(this.sellerGoodsPage);
            },
            currentSellerGoodsChange(currentPage) {
                this.sellerGoodsPage.currentPage = currentPage;
            },
            sizeSellerGoodsChange(pageSize) {
                this.sellerGoodsPage.pageSize = pageSize;
            },
            //关闭店铺详情弹框
            closeDrawer() {
                this.dialogVisible = false;
				this.chooseValue = ''
                this.$nextTick(() => {
                    this.$refs.forms.resetForm();
                    this.$refs.forms.clearValidate();
                });
            },
            // 查看
            getView(row) {
                console.log('row', row)
                this.form = row
                let data = {}
                let xmlname = ''
                if (this.form.navType == 0) {
                    data = {
                        id: row.actId
                    }
                    xmlname = getActDictData
                } else if (this.form.navType == 1) { // 一级分类
                    data = {
                        id: row.goodsClassId
                    }
                    xmlname = listManage
                } else if (this.form.navType == 2) {
                    data = {
                        id:row.secondGoodsClassId
                    }
                    xmlname = listManage
                } else if (this.form.navType == 3) {
                    data = {
                        id:row.thirdGoodsClassId
                    }
                    xmlname = listManage
                } else if (this.form.navType == 4) {
                    data = {
                        id: row.goodsId
                    }
                    xmlname = listDicData
                } else if (this.form.navType == 5) {
                    data = {
                        id: row.storeId
                    }
                    xmlname = StoreListManage
                }
                xmlname(data).then((res) => {
                    if (res.data.code == 200) {
                        let obj = res.data.data[0];
                        this.getChooseValue(obj)
                    } else {
                        this.$message({
                            type: "error",
                            message: res.data.message
                        });
                    }
                });
                setTimeout(res => {
                    this.isView = true;
                    this.dialogVisible = true;
                    this.dialogTitle = "查看";
                }, 500)
            },
            getEdit(row) {
                console.log('row',row)
                this.form = row
                let data = {}
                let xmlname = ''
                if (this.form.navType == 0) {
                    data = {
                        id: row.actId
                    }
                    xmlname = getActDictData
                } else if (this.form.navType == 1) { // 一级分类
                    data = {
                        id:row.goodsClassId
                    }
                    xmlname = listManage
                } else if (this.form.navType == 2) {
                    data = {
                        id:row.secondGoodsClassId
                    }
                    xmlname = listManage
                } else if (this.form.navType == 3) {
                    data = {
                        id:row.thirdGoodsClassId
                    }
                    xmlname = listManage
                } else if (this.form.navType == 4) {
                    data = {
                        id: row.goodsId
                    }
                    xmlname = listDicData
                } else if (this.form.navType == 5) {
                    data = {
                        id: row.storeId
                    }
                    xmlname = StoreListManage
                }
                xmlname(data).then((res) => {
                    if (res.data.code == 200) {
                        let obj = res.data.data[0];
                        this.getChooseValue(obj)
                    } else {
                        this.$message({
                            type: "error",
                            message: res.data.message
                        });
                    }
                })
                setTimeout(res => {
                    this.isView = false;
                    this.dialogVisible = true;
                    this.dialogTitle = "编辑";
                }, 500)
            },
            getChooseValue(row) {
                console.log('row--getChooseValue', row)
                let nav = row.navType
                if (row.acTitle) {
                    this.chooseValue = row.acTitle + '--' + row.createUserOrganizationName
                } else if (row.className) {
                    this.chooseValue = row.className
                } else if (row.goodsName) {
                    this.chooseValue = row.goodsName
                } else if (row.storeName) {
                    this.chooseValue = row.storeName
                }
            },
            handleAdd() {
                this.$nextTick(() => {
                    this.$refs.forms.resetForm();
                    this.$refs.forms.clearValidate();
                });
                this.sellerGoodsList = []
                this.isView = false;
                this.dialogVisible = true;
                this.dialogTitle = "新增";
            },
            submit(loading, done) {
                this.loading = true;

                console.log(this.form)
                // if(this.form.navType==0){
                // 	if(!this.form.title|| !this.form.actId || !this.form.sequence || !this.form.actIco){
                // 	  this.$message.error('请填写必要信息')
                // 	  return
                // 	}
                // }else{
                // 	if(!this.form.title|| !this.form.sequence || !this.form.actIco){
                // 	  this.$message.error('请填写必要信息')
                // 	  return
                // 	}
                // }

                if (this.dialogTitle == "新增") {

                    this.form.clientKind = 1;
                    add(this.form).then((res) => {
                        this.loading = false;
                        if (res.data.code == 200) {
                            this.$message({
                                type: "success",
                                message: "操作成功!"
                            });
                        } else {
                            this.$message({
                                type: "error",
                                message: res.data.message
                            });
                        }
                        done()
                        this.closeDrawer()
                        this.onLoad(this.page);
                    })
                } else {
                    update(this.form).then((res) => {
                        // this.onLoad(this.page);
                        this.loading = false;
                        if (res.data.code == 200) {
                            this.$message({
                                type: "success",
                                message: "操作成功!"
                            });
                        } else {
                            this.$message({
                                type: "error",
                                message: res.data.message
                            });
                        }
                        done()
                        this.closeDrawer()
                        this.onLoad(this.page);
                        done();
                    });
                }
            },
            getActData() {
                getActDictData(2, 3).then((res) => {
                    if (res.data.code == 200) {
                        this.actPlatformData = res.data.data;
                    } else {
                        this.$message({
                            type: "error",
                            message: res.data.message
                        });
                    }

                });
            },
            //图片返回数据
            selFileCallBack(obj) {
                this.form.actIco = obj[0];
            },
            //打开选取图片的弹框
            uploadbtn() {
                if (!this.isView) {
                    this.$refs.selFile.open();
                }
            },
            rowDel(row) {
                this.$confirm("确定将选择数据删除?", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                })
                    .then(() => {
                        return remove(row.id);
                    })
                    .then((res) => {
                        if (res.data.code == 200) {
                            this.$message({
                                type: "success",
                                message: "操作成功!"
                            });
                        } else {
                            this.$message({
                                type: "error",
                                message: res.data.message
                            });
                        }
                        this.onLoad(this.page);
                    });
            },
            searchReset() {
                this.query = {};
                this.onLoad(this.page);
            },
            searchChange(params, done) {
                this.query = params;
                this.onLoad(this.page, params, done);
            },
            currentChange(currentPage) {
                this.page.currentPage = currentPage;
            },
            sizeChange(pageSize) {
                this.page.pageSize = pageSize;
            },
            refreshChange() {
                this.onLoad(this.page);
            },
            onLoad(page, params = {}, done) {
                this.loading = true;
                getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
                    if (done) {
                        done();
                    }
                    this.loading = false;
                    const data = res.data;
                    this.page.total = data.count;
                    if (data.data.length == 0 && this.page.currentPage > 0) {
                        this.page.currentPage -= 1
                        this.onLoad(this.page);
                    }
                    for (let i = 0; i < data.data.length; i++) {
                        if (data.data.navType == 1) {
                            data.data.navUrl = data.data.navUrl2;
                        } else {

                        }
                    }
                    this.data = data.data;
                });
            },
            onSellerGoodsLoad(sellerGoodsPage, params = {}) {
                let data = {}
                let xmlname = ''
                if (this.form.navType == 0) {
                    data = {type: 2, groupBuyType: 3}
                    xmlname = getActDictData
                } else if (this.form.navType == 1) { // 一级分类
                    data = {
                        classLevel: 0,
                        classDisplay: true
                    }
                    xmlname = listManage
                } else if (this.form.navType == 2) {
                    data = {
                        classLevel: 1,
                        classDisplay: true
                    }
                    xmlname = listManage
                } else if (this.form.navType == 3) {
                    data = {
                        classLevel: 2,
                        classDisplay: true
                    }
                    xmlname = listManage
                } else if (this.form.navType == 4) {
                    data = {
                        goodsType: 1,
                        goodsStatus: 0
                    }
                    xmlname = listDicData
                } else if (this.form.navType == 5) {
                    data = {
                        storeStatus: 2
                    }
                    xmlname = StoreListManage
                }
                let query = {page: sellerGoodsPage.currentPage, size: sellerGoodsPage.pageSize, ...data, ...params,...this.sellerGoodsQuery}
                xmlname(query).then(res => {
                    console.log('ressssss',res)
                    if (res.data.code == 200) {
                        this.sellerGoodsList = res.data.data;
                        this.sellerGoodsloading = false
                        this.sellerGoodsPage.total = res.data.count
                        console.log('this.form',this.form.navType)
                        this.drawerAct = this.form.navType==0?true:false
                        this.drawerClass = this.form.navType==1 || this.form.navType==2 || this.form.navType==3?true:false
                        this.drawerGoods = this.form.navType==4?true:false
                        this.drawerStores = this.form.navType==5?true:false
                    } else {
                        this.$message({
                            type: "error",
                            message: res.data.message
                        });
                    }
                });
            },
        }
    };
</script>

<style>
    .upload {
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }

    .tsmsg {
        width: 200px;
        font-size: 10px;
        color: #999;
        margin: 0px;
        padding-left: 10px;
    }

    .demo-drawer__header {
        padding: 10px;
    }

    .demo-drawer__content {
        padding: 10px;
    }
</style>
